"Responsive Video"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="video-bg">
<div class="video-overlay"></div>
<div class="text-overlay">
<div class="container">
<h2 class="text-golden">Inspiring the Future <br>Through History</h2>
<div class="line"></div>
</div>
</div>
<video loop autoplay muted playsinline poster="img/video/poster.jpg">
<source src="https://cdn.pixabay.com/video/2023/07/04/169951-842348732_large.mp4" type="video/mp4">
</video>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.video-bg {
height: 100vh;
overflow: hidden;
position: relative;
}
@media only screen and (max-width: 768px) {
.video-bg {
height: 70vh;
}
}
.video-bg video {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.video-bg .video-overlay {
position: absolute;
background: rgba(0, 22, 20, 0.75);
inset: 0;
z-index: 8;
}
.video-bg .text-overlay {
padding-top: 60px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
z-index: 9;
text-align: center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)
Responsive Event Html template bootstrap 4

Questions / Comments: